<template>
  <div class="recharge-water-bill">
    <div class="aside">
      <div class="search-wrap">
        <Search />
        <span>搜索</span>
      </div>
      <div class="tree-wrap">
        <el-tree
          :data="data"
          :props="defaultProps"
          node-key="id"
          :check-strictly="true"
        />
      </div>
    </div>
    <div class="right-wrap">
      <div class="device-data-wrap">
        <div class="left">
          <img src="./images/shuibiao.png" alt="" />
          <div class="val">438.22</div>
          <div class="name">剩余金额(s)</div>
          <div class="status">正常</div>
        </div>
        <ul class="center">
          <li>
            <div class="item">
              <img src="./images/damen-icon.png" alt="" />
              <div class="msg">
                <div class="name">房间号</div>
                <div class="val">201</div>
              </div>
            </div>
            <div class="item">
              <img src="./images/user-icon.png" alt="" />
              <div class="msg">
                <div class="name">责任人</div>
                <div class="val">刘瑞</div>
              </div>
            </div>
            <div class="item">
              <img src="./images/photo-icon.png" alt="" />
              <div class="msg">
                <div class="name">联系电话</div>
                <div class="val">1811378960</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item">
              <img src="./images/shuiliang.png" alt="" />
              <div class="msg">
                <div class="name">当月用水量</div>
                <div class="val">7.23吨</div>
              </div>
            </div>
            <div class="item">
              <img src="./images/shengyu.png" alt="" />
              <div class="msg">
                <div class="name">剩余额度</div>
                <div class="val">56吨</div>
              </div>
            </div>
            <div class="item">
              <img src="./images/zongedu.png" alt="" />
              <div class="msg">
                <div class="name">总额度</div>
                <div class="val">63.23吨</div>
              </div>
            </div>
          </li>
        </ul>
        <ul class="right">
          <li>定额管理</li>
          <li>能效对标</li>
          <li>报警设置</li>
          <li>充值</li>
        </ul>
      </div>
      <div class="table-wrap">
        <div class="title">
          <ul class="tab-list">
            <li @click="selVal = 1" :class="[{ active: selVal == 1 }, 'item']">
              用能信息
            </li>
            <li @click="selVal = 2" :class="[{ active: selVal == 2 }, 'item']">
              订单信息
            </li>
            <li @click="selVal = 3" :class="[{ active: selVal == 3 }, 'item']">
              报警信息
            </li>
          </ul>
          <div class="search-wrap">
            <el-date-picker
              v-model="params.value2"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
            <el-button :icon="Search" type="primary" @click="getList"
              >查询</el-button
            >
          </div>
        </div>
        <Alarmmessage v-if="selVal == 3" />
        <Ordermessage v-if="selVal == 2" />
        <div class="chart-title" v-if="selVal == 1">
          <span>累计水量：400.08t</span>
          <span>当月水量：40.08t</span>
        </div>
        <Energyinformation v-if="selVal == 1" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
import Alarmmessage from "./components/alarmmessage";
import Ordermessage from "./components/ordermessage";
import Energyinformation from "./components/energyinformation";
let showDiaLog = ref(false);
let selVal = ref(1);
let diaForm = reactive({});
let params = reactive({});
let options = [{ label: 1, value: 1 }];
const defaultProps = {
  children: "children",
  label: "label",
};
let total = ref(1);
let tableItem = ref([
  {
    prop: "date",
    label: "表号",
  },
  {
    prop: "date",
    label: "区域",
  },
  {
    prop: "date",
    label: "房间",
  },
  {
    prop: "date",
    label: "户名",
  },

  {
    prop: "date",
    label: "联系电话",
  },
  {
    prop: "date",
    label: "日期",
  },
  {
    prop: "date",
    label: "扣费金额",
  },
]);

const tableData = [
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },

  {
    date: "基波电压(V)",

    name: "基波电流",
  },
];
let getList = () => {};
let handleNodeClick = (e) => {
  showDiaLog.value = true;
};

const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
];
</script>
<style lang="scss" scoped>
.recharge-water-bill {
  width: 100%;
  margin-top: 5px;
  display: flex;
  .right-wrap {
    width: calc(100vw - 204px - 9px - 282px);

    .device-data-wrap {
      display: flex;
      align-items: center;
      width: calc(100vw - 204px - 9px - 282px);

      .left {
        width: 313px;
        height: 261px;
        background: #022551;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        padding-top: 59px;
        position: relative;
        img {
          width: 82px;
          height: 77px;
        }
        .status {
          width: 47px;
          position: absolute;
          height: 24px;
          background: url("./images/status-bgc.png") no-repeat 100% 100%;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #fffefe;
          text-align: center;
          line-height: 24px;
          right: 93px;
          top: 48px;
        }
        .val {
          width: 95px;
          height: 33px;
          border: 1px solid #144d71;
          text-align: center;
          line-height: 33px;
          margin-top: 23px;

          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 23px;
          color: #fffefe;
        }
        .name {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 19px;
          color: #fffefe;
          margin-top: 17px;
        }
      }
      .center {
        height: 261px;
        background: #022551;
        width: 691px;
        margin: 0 8px 0 8px;
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        justify-content: space-between;
        padding: 45px 0;
        li {
          display: flex;
          align-items: center;
          padding: 0 59px 0 61px;

          .item {
            display: flex;
            flex-grow: 1;
            flex-shrink: 0;
            width: 1px;
            img {
              width: 52px;
              height: 52px;
              margin-right: 11px;
            }
            .msg {
              .name {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 16px;
                color: #fffefe;
              }
              .val {
                font-family: Source Han Sans CN;
                font-weight: 500;
                font-size: 19px;
                color: #fffefe;
                margin-top: 10px;
              }
            }
          }
        }
      }
      .right {
        padding-right: 6px;
        width: 384px;
        height: 261px;
        /* background: #022551; */
        display: flex;
        flex-wrap: wrap;
        padding-top: 2px;
        justify-content: space-between;
        li {
          width: 186px;
          height: 126px;
          line-height: 126px;
          text-align: center;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 20px;
          color: #61c8ff;

          background: #022551;
        }
        li:nth-of-type(3),
        li:nth-of-type(4) {
          margin-top: 7px;
        }
      }
    }
    .table-wrap {
      width: calc(100vw - 204px - 9px - 302px);
      height: 100vh;
      margin-top: 10px;
      background: #022551;
      position: relative;
      .chart-title {
        position: absolute;
        right: 50%;
        top: 80px;
        transform: translateX(50%);
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        color: #ffffff;
        span:nth-of-type(1) {
          margin-right: 75px;
        }
      }
      .title {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding-right: 63px;
        .tab-list {
          display: flex;

          padding: 17px 0 0 23px;
          .item:nth-of-type(1) {
            margin-left: 0px !important;
          }
          .item {
            width: 109px;
            height: 36px;
            text-align: center;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 17px;
            background: url("./images/sel-bgc.png") no-repeat;
            background-size: 100% 100%;
            line-height: 35px;
            color: #61c8ff;
            cursor: pointer;

            margin-left: 11px;
          }
          .active {
            width: 109px;
            height: 36px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 17px;
            color: #ffffff;
            line-height: 32px;
            background: url("./images/sel-bgc-active.png") no-repeat;
            background-size: 100% 100%;
            border-radius: 5px;
            border: 1px solid #61c8ff;
          }
        }
      }
      .search-wrap {
        display: flex;
        align-items: center;
        width: 500px;
        :deep(.el-button) {
          width: 84px;
          height: 35px;
          margin-left: 21px;
          background: rgba(27, 168, 255, 0.35);
          border: 1px solid #61c8ff;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          color: #fefefe;
          border-radius: 0px;

          svg {
            width: 16px !important;
            height: 150px !important;
          }
        }
      }
    }
  }
  .aside {
    width: 204px;
    background-color: #022552;
    height: calc(100vh - 168px - 5px);
    padding-top: 22px;
    flex-shrink: 0;
    margin-right: 9px;
    .tree-wrap {
      padding-top: 28px;
      display: flex;
      padding-left: 25px;
      justify-content: center;
      :deep(.el-tree) {
        width: 100%;
        background-color: #022552;
        height: calc(100vh - 168px - 5px - 28px);
      }
      :deep(.el-checkbox__inner) {
        width: 15px;
        height: 15px;
        background: #044483;
        border: 1px solid #61c8ff;
      }
      :deep(.el-checkbox__input.is-checked .el-checkbox__inner::after) {
        width: 4px;
        height: 10px;
      }
    }
    .search-wrap {
      margin: 0 auto;
      width: 171px;
      height: 39px;
      background: rgba(97, 200, 255, 0.31);
      border-radius: 20px;
      border: 1px solid #61c8ff;
      display: flex;
      align-items: center;
      padding-left: 16px;
      cursor: pointer;
      svg {
        color: #fff;
        width: 12px;
        height: 13px;
        margin-right: 7px;
      }
      span {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
      }
    }
  }
}
</style>
